<!--
 * @Author: fisher
 * @Date: 2023-08-07 14:43:49
 * @LastEditTime: 2023-12-28 15:29:59
 * @LastEditors: fisher
 * @Description: 
 * @FilePath: \front-end-template\src\modules\DataManage\transform\modules\warehouse.vue
-->
<template>
  <div>
    <!-- 搜索及操作按钮 -->
    <div class="operate">
      <div class="search">
        <span>仓库名称:</span>
        <div class="search_input">
          <input v-model="searchKey" type="text" placeholder="请输入" />
          <img
            src="@/assets/img/dataManagement/search.webp"
            alt="search"
            @click="search"
          />
        </div>
      </div>
      <!-- <div
        class="btn btn_prime"
        @click="addWarehouse"
      >
        新增仓库
      </div>
      <div class="btn btn_prime">
        新增模板
      </div>
      <div
        class="btn"
        :class="{ btn_prime: multipleSelection.length }"
        @click="deleteWarehouse"
      >
        批量删除
      </div> -->
    </div>
    <div ref="table" class="table">
      <fks-table
        ref="multipleTable"
        v-loading="tableLoading"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%; height: 100%; overflow-y: scroll"
        @row-click="rowClick"
      >
        <!-- <fks-table-column type="selection" width="55" /> -->
        <fks-table-column type="index" label="序号" width="50" />
        <fks-table-column prop="warehouseName" label="仓库名称" width="200" />
        <fks-table-column
          prop="description"
          label="仓库描述"
          show-overflow-tooltip
        />
      </fks-table>
    </div>
    <fks-pagination
      class="pagination"
      :current-page="pageNo"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { getWarehouseList } from "../../templates/api.js";
export default {
  components: {},
  data() {
    return {
      searchKey: "",
      tableData: [],
      multipleSelection: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      tableLoading: false,
      whaleHouseVisible: false,
    };
  },
  computed: {},
  mounted() {
    this.pageNo = 1;
    this.pageSize = 10;
    this.getData();
  },
  destroyed() {},
  methods: {
    async getData() {
      this.tableLoading = true;
      const data = {};
      if (this.searchKey) {
        data.warehouseName = this.searchKey.trim();
      }
      const params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      };
      try {
        const res = await getWarehouseList(data, params);
        this.total = res.data.total;
        this.tableData = [...res?.data?.list];
        this.tableLoading = false;
      } catch (err) {
        throw new Error("未获取到数据:", err);
      }
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.pageNo = val;
      this.getData();
    },
    search() {
      this.getData();
    },
    rowClick(row) {
      this.$emit("toDetails", row);
    },
  },
};
</script>

<style lang="scss" scoped>
.operate {
  padding: 20px 0;
  display: flex;
  align-items: center;
  .search {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    span {
      font-size: 14px;
      font-family: MicrosoftYaHei;
      color: rgba(0, 0, 0, 0.85);
    }
    &_input {
      position: relative;
      width: 266px;
      height: 36px;
      input {
        width: 100%;
        height: 100%;
        border: 1px solid #cbd5dd;
        outline: none;
        font-size: 14px;
        color: #000;
        padding: 0 30px 0 12px;
      }
      input::-webkit-input-placeholder {
        font-family: MicrosoftYaHei;
        color: rgba(0, 0, 0, 0.25);
      }
      img {
        width: 16px;
        height: 16px;
        position: absolute;
        right: 11px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
      }
    }
  }
}
.table {
  height: calc(100% - 140px);
  overflow: hidden;
}

.pagination {
  display: flex;
  justify-content: flex-end;
  padding: 20px 0;
}
</style>
